<template>
	<div>
		<section class="headicon-strip" style="margin-top: 3rem;">
			<mu-flat-button style="width: 100%;height: auto;">
				<span class="left-title" >头像</span>
				<div class="right-info" >
					<section class="img-circle" style="float: right;">
				  		<mu-card-media >
		        			<img :src="headicon1" style="width: 100%;"/>
		        		</mu-card-media>
		    		</section> 
				</div>
			</mu-flat-button>
		</section>
		<section class="info-strip" style="margin-top: 0.8rem;">
			<mu-flat-button style="width: 100%;height: auto;">
				<mu-icon value="account_circle" color="#429cce" class="mu-iconLeft" />
				<span class="left-title" >用户名</span>
				<span class="list-right-info" >{{userName}}</span>
			</mu-flat-button>
		</section>
		
		<!--<section class="info-strip" >
			<mu-flat-button style="width: 100%;height: auto;">
				<mu-icon value="face" color="#8ba3f9" class="mu-iconLeft" />
				<span class="left-title" >昵称</span>
				<span class="list-right-info" >大白</span>
			</mu-flat-button>
		</section>
		-->
		<section class="info-strip" >
			<mu-flat-button style="width: 100%;height: auto;">
				<mu-icon value="receipt" color="orange700" class="mu-iconLeft" />
				<span class="left-title" >编号</span>
				<span class="list-right-info">{{userNumber}}</span>
			</mu-flat-button>
		</section>
		<!--<section class="info-strip" >
			<mu-flat-button style="width: 100%;height: auto;">
				<mu-icon value="account_circle" color="#429cce" class="mu-iconLeft" />
				<span class="left-title" >绑定微信</span>
				<span class="list-right-info"></span>
			</mu-flat-button>
		</section>-->
		
	</div>
</template>

<script>
	export default {
		data(){
			return{
				message:'',
			    userIdentity:'',
			    isCommissary:false,
			    userInfo:{},
				headicon1:'static/images/headicon1.jpg',
				userName:'',
				userNumber:''
			}
			
		},
		computed:{
//			userInfo:function(){
//		      	return this.$parent.userInfo
//		    }
		},
		mounted(){
			this.userName=localStorage.userName
			this.userNumber=localStorage.userNumber
			let that=this
			
//		    that.userIdentity = localStorage.userIdentity
//		    that.isCommissary = localStorage.isCommissary=='true'
//		    if(localStorage.userInfo!=null){
//		        that.userInfo = JSON.parse(localStorage.userInfo)
//		    }
		}	
	}
</script>

<style scoped>
	.img-circle{
		width: 4rem; 
		height: 4rem; 
		background-color: white; 
		border-radius: 50%!important; 
		overflow: hidden!important; 
		z-index: 20;
		position: relative;
		/*border:2px solid white*/
	}
	.headicon-strip{
		width:100%; 
		display:flex;
		flex-direction: row; 
		background-color: #fff !important;
		height: 5.2rem !important;
		border-bottom: 1px solid #e4e4e4 ;
		margin-top:0.8rem;
	}
	.left-title{
		width: 20%; 
		font-size: 1rem;
		text-align: left; 
	}
	.right-info{
		width: 72%; 
		margin-right: 3%;
	}
	.list-right-info{
		width: 64%; 
		margin-right: 3%;
		text-align: right;
		font-size: 1rem;
	}
	.info-strip{
		width:100%; 
		display:flex;
		flex-direction: row; 
		background-color: #fff !important;
		height: 3.6rem;
		border-bottom: 1px solid #e4e4e4 ;
	}
	.mu-iconLeft{
		width: 8%; 
		text-align: left;
	}
</style>